<template>
  <div class="_container">
      <el-container>
        <el-main>
          <div style="margin: 15% auto;text-align: center;overflow: hidden;">
            <img :class="['animated',value]" src="../assets/img/welcome.png" />
            <p>动画效果演示</p>
            <p v-show="value">class:animated {{value}}</p>
          </div>
        </el-main>
        <el-aside width="200px;">
          <el-card>
            <el-collapse
              v-model="activeName"
              v-for="(option,i) in options"
              :key="i"
              accordion
              style="width:100px"
            >
              <el-collapse-item :title="option.label" :name="option.label">
                <p v-for="(o,index) in option.options" :key="index">
                  <el-link :underline="false" @click="handleClick(o.value);">{{o.label}}</el-link>
                </p>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </el-aside>
      </el-container>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      activeName: "淡入淡出",
      options: [
        {
          label: "淡入淡出",
          options: [
            {
              value: "fadeIn",
              label: "淡入"
            },
            {
              value: "fadeInDown",
              label: "向下淡入"
            },
            {
              value: "fadeInDownBig",
              label: "向下快速淡入"
            },
            {
              value: "fadeInLeft",
              label: "向右淡入"
            },
            {
              value: "fadeInLeftBig",
              label: "向右快速淡入"
            },
            {
              value: "fadeInRight",
              label: "向左淡入"
            },
            {
              value: "fadeInRightBig",
              label: "向左快速淡入"
            },
            {
              value: "fadeInUp",
              label: "向上淡入"
            },
            {
              value: "fadeInUpBig",
              label: "向上快速淡入"
            },
            {
              value: "fadeOut",
              label: "淡出"
            },
            {
              value: "fadeOutDown",
              label: "向下淡出"
            },
            {
              value: "fadeOutDownBig",
              label: "向下快速淡出"
            },
            {
              value: "fadeOutLeft",
              label: "向左淡出"
            },
            {
              value: "fadeOutLeftBig",
              label: "向左快速淡出"
            },
            {
              value: "fadeOutRight",
              label: "向右淡出"
            },
            {
              value: "fadeOutRightBig",
              label: "向右快速淡出"
            },
            {
              value: "fadeOutUp",
              label: "向上淡出"
            },
            {
              value: "fadeOutUpBig",
              label: "向上快速淡出"
            }
          ]
        },
        {
          label: "弹跳类",
          options: [
            {
              value: "bounceIn",
              label: "弹跳进入"
            },
            {
              value: "bounceInDown",
              label: "向下弹跳进入"
            },
            {
              value: "bounceInLeft",
              label: "向右弹跳进入"
            },
            {
              value: "bounceInRight",
              label: "向左弹跳进入"
            },
            {
              value: "bounceInUp",
              label: "向上弹跳进入"
            },
            {
              value: "bounceOut",
              label: "弹跳退出"
            },
            {
              value: "bounceOutDown",
              label: "向下弹跳退出"
            },
            {
              value: "bounceOutLeft",
              label: "向左弹跳退出"
            },
            {
              value: "bounceOutRight",
              label: "向右弹跳退出"
            },
            {
              value: "bounceOutUp",
              label: "向上弹跳退出"
            }
          ]
        },
        {
          label: "缩放类",
          options: [
            {
              value: "zoomIn",
              label: "放大进入"
            },
            {
              value: "zoomInDown",
              label: "向下放大进入"
            },
            {
              value: "zoomInLeft",
              label: "向右放大进入"
            },
            {
              value: "zoomInRight",
              label: "向左放大进入"
            },
            {
              value: "zoomInUp",
              label: "向上放大进入"
            },
            {
              value: "zoomOut",
              label: "缩小退出"
            },
            {
              value: "zoomOutDown",
              label: "向下缩小退出"
            },
            {
              value: "zoomOutLeft",
              label: "向左缩小退出"
            },
            {
              value: "zoomOutRight",
              label: "向右缩小退出"
            },
            {
              value: "zoomOutUp",
              label: "向上缩小退出"
            }
          ]
        },
        {
          label: "旋转类",
          options: [
            {
              value: "rotateIn",
              label: "顺时针旋转进入"
            },
            {
              value: "rotateInDownLeft",
              label: "从左往下旋入"
            },
            {
              value: "rotateInDownRight",
              label: "从右往下旋入"
            },
            {
              value: "rotateInUpLeft",
              label: "从左往上旋入"
            },
            {
              value: "rotateInUpRight",
              label: "从右往上旋入"
            },
            {
              value: "rotateOut",
              label: "顺时针旋转退出"
            },
            {
              value: "rotateOutDownLeft",
              label: "向左下旋出"
            },
            {
              value: "rotateOutDownRight",
              label: "向右下旋出"
            },
            {
              value: "rotateOutUpLeft",
              label: "向左上旋出"
            },
            {
              value: "rotateOutUpRight",
              label: "向右上旋出"
            }
          ]
        },
        {
          label: "翻转类",
          options: [
            {
              value: "flipInX",
              label: "水平翻转进入"
            },
            {
              value: "flipInY",
              label: "垂直翻转进入"
            },
            {
              value: "flipOutX",
              label: "水平翻转退出"
            },
            {
              value: "flipOutY",
              label: "垂直翻转退出"
            }
          ]
        },
        {
          label: "强调类",
          options: [
            {
              value: "bounce",
              label: "弹跳"
            },
            {
              value: "flash",
              label: "闪烁"
            },
            {
              value: "pulse",
              label: "脉冲"
            },
            {
              value: "rubberBand",
              label: "橡皮筋"
            },
            {
              value: "shake",
              label: "左右弱晃动"
            },
            {
              value: "swing",
              label: "上下摆动"
            },
            {
              value: "tada",
              label: "缩放摆动"
            },
            {
              value: "wobble",
              label: "左右强晃动"
            },
            {
              value: "jello",
              label: "拉伸抖动"
            }
          ]
        }
      ],
      value: ""
    };
  },
  created: function() {},
  mounted: function() {},
  methods: {
    handleClick: function(e) {
      console.log("===============");
      this.value = "null";
      this.value = e;
    }
  }
};
</script>
<style scoped>
p {
  color: #adafb5;
}
</style>
